<template>
    <user-wrapper :avatar="avatar||defaultAvatar">
        <template slot="title">
            <div class="textEllipsis name">{{name}}</div>
            <div :class="{male:gender===1,female:gender===2}"></div>    
        </template>
        <div class="textEllipsis fontGrey desc" slot="info">
              {{ wxid }}
        </div>
    </user-wrapper>
</template>
<script>
import userWrapper from '@/components/user-wrapper';
export default {
    name:"friend",
    components:{ userWrapper },
    props:{
        avatar:{
            type:String 
        },
        name:{
            type:String 
        },
        wxid:{
            type:String
        },
        gender:{
            type:Number
        } 
    } //['avatar','name','member','friend']  
}
</script>
<style scoped>
.name {
    line-height: 20px;
    font-size: 14px;
}
.desc{
    font-size: 12px;
    margin-top: 5px;
    line-height: 14px;
}
.male{
    background-image: url(/images/male.png);
    padding-right:20px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: right center;
}
.female{
    background-image: url(/images/female.png);
    padding-right:20px;
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: right center;
}
</style>